<template>
  <div class="common-layout">
    <el-container>
      <el-main>
        <div class="main flex">
          <div class="flex-1 ml-4">
            <el-form ref="formRef" :inline="true" :model="form">
              <el-form-item label="学院名称：" prop="Name">
                <el-input v-model="form.Name" placeholder="请输入学院名称" clearable @keyup.enter="getlist" />
              </el-form-item>
              <el-form-item label="学院编号：" prop="No">
                <el-input v-model="form.No" placeholder="请输入学院编号" clearable @keyup.enter="getlist" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :icon="Search" @click="getlist">搜索</el-button>
                <el-button :icon="Refresh" @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>

            <div class="common-layout-2">
              <el-container>
                <el-header style="text-align: right" height="80px">
                  <el-row>
                    <el-col :span="12">
                      <h1 class="main-title">学院管理</h1>
                    </el-col>
                    <el-col :span="12">
                      <el-button type="primary" :icon="Plus" @click="showAddDialog">
                        新增学院
                      </el-button>
                    </el-col>
                  </el-row>
                </el-header>
                <el-main>
                  <el-scrollbar :height="isWidth ? '630px' : '419px'">
                    <el-table table-layout="auto" :size="size" :data="datalist" :header-cell-style="{
                      background: '#fafafa',
                      color: '#606266',
                    }" border stripe v-loading="loading" element-loading-background="rgba(255, 255, 255, .5)"
                      element-loading-text="加载中，请稍后..." element-loading-spinner="el-icon-loading"
                      :default-sort="{ prop: 'No', order: 'acending' }">
                      <el-table-column prop="No" align="center" label="学院编号" />
                      <el-table-column prop="Name" align="center" label="学院名称" />
                      <el-table-column fixed="right" align="center" label="操作" width="180">
                        <template #default="scope">
                          <el-button class="reset-margin" link type="primary" :size="size"
                            @click="showModDialog(scope.row.No, scope.row.Name)">
                            修改
                          </el-button>
                          <el-button class="reset-margin" link type="primary" :size="size"
                            @click="delCollege(scope.row.No)">
                            删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-scrollbar>
                </el-main>
              </el-container>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
  <el-dialog title="添加学院" v-model="addDialog" width="20%" draggable>
    <el-form :model="addForm" :rules="FormRules" label-width="100px">
      <el-form-item label="学院编号" prop="No">
        <el-input v-model="addForm.No" placeholder="单个数字输入形如‘01’"></el-input>
      </el-form-item>
      <el-form-item label="学院全称" prop="Name">
        <el-input v-model="addForm.Name" placeholder="以‘学院’结尾"></el-input>
      </el-form-item>
    </el-form>
    <span class="dialog-footer" style="margin-left: 38%;">
      <el-button type="primary" @click="addCollege()">确 定</el-button>
      <el-button @click="addDialog = false">取 消</el-button>
    </span>
  </el-dialog>
  <el-dialog title="修改学院" v-model="modDialog" width="20%" draggable>
    <el-form :model="modForm" :rules="FormRules" label-width="100px">
      <el-form-item label="学院编号" prop="No">
        <el-input v-model="modForm.No" :placeholder="preNo"></el-input>
      </el-form-item>
      <el-form-item label="学院全称" prop="Name">
        <el-input v-model="modForm.Name" :placeholder="preName"></el-input>
      </el-form-item>
    </el-form>
    <span class="dialog-footer" style="margin-left: 38%;">
      <el-button type="primary" @click="modCollege()">确 定</el-button>
      <el-button @click="modDialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { Refresh, Search, Plus } from "@element-plus/icons-vue";
export default {
  data() {
    return {
      form: {
        No: "",
        Name: "",
      },
      addForm: {
        No: "",
        Name: "",
      },
      FormRules: {
        No: [
          {
            required: true,
            message: "请输入学院编号",
            trigger: "blur",
          },
        ],
        Name: [
          {
            required: true,
            message: "请输入学院名称",
            trigger: "blur",
          },
        ],
      },
      preNo: "",
      preName: "",
      datalist: [],
      Search,
      Refresh,
      Plus,
      loading: true,
      addDialog: false,
      modDialog: false,
      screenWidth: document.body.clientWidth,
      isWidth: false
    };
  },
  mounted() {
    this.setClient();
    this.getall();
  },
  methods: {
    async getlist() {
      this.loading = true;
      this.datalist = [];
      if (this.form.Name === "") {
        const { data: res } = await this.$http.post(
          "api/query/collegeNo",
          this.form
        );
        if (res.Data["res"][0].Code === 200) {
          this.datalist = res.Data["res"];
        }
      } else {
        const { data: res } = await this.$http.post(
          "api/query/collegeName",
          this.form
        );
        if (res.Data["res"][0].Code === 200) {
          this.datalist = res.Data["res"];
        }
      }
      this.loading = false;
    },
    async getall() {
      this.loading = true;
      this.datalist = [];
      const { data: res } = await this.$http.get("api/query/collegeAll");
      this.datalist = res.Data["ret"];
      this.loading = false;
    },
    resetForm() {
      this.form.Name = "";
      this.form.No = "";
      this.getall();
    },
    async delCollege(No) {
      const confirmResult = await this.$confirm(
        "将永久删除该学院, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult != "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await this.$http.post("api/delete/college", {
        No: No,
      });
      if (res.Data["ret"][0].Code != 200) {
        return this.$message.error("删除失败 T.T 请先删除该学院的全部组成。");
      } else {
        this.$message.success("删除成功");
        this.getall();
      }
    },
    showAddDialog() {
      this.addForm = {};
      this.addDialog = true;
    },
    async addCollege() {
      const { data: res } = await this.$http.post("api/query/collegeNo", this.addForm)
      if (res.Data["res"][0].Code == 200) {
        this.addForm = {};
        return this.$message.error("添加失败 T.T 编号被别的学院抢先了");
      } else {
        const { data: res } = await this.$http.post("api/insert/college", this.addForm)
        if (res.Code == 501) {
          this.addForm = {};
          return this.$message.error("按照要求输入：以“学院结尾” & 单个数字0占位");
        }
        if (res.Data["res"][0].Code == 200) {
          this.getall();
          this.addDialog = false
          this.$message.success("添加成功");
        }
      }
    },
    showModDialog(No, Name) {
      this.modForm = {};
      this.preNo = "原编号：" + No;
      this.preName = "原院名：" + Name;
      this.modDialog = true;
    },
    async modCollege() {
      const { data: res } = await this.$http.post("api/query/collegeNo", this.modForm)
      if (res.Data["res"][0].Code == 200) {
        if (res.Data["res"][0].No != this.modForm.No) {
          return this.$message.error("修改失败 T.T 这个编号正在被使用");
        }
      }
      const { data: ret } = await this.$http.post("api/update/college", this.modForm)
      if (ret.Data["res"][0].Code == 200) {
        this.getall();
        this.modDialog = false
        this.$message.success("修改成功");
      } else {
        return this.$message.error("修改失败 T.T");
      }

    },
    setClient() {
      this.screenWidth = document.body.offsetWidth
      console.log(this.screenWidth)
      if (this.screenWidth < 1550) {
        this.isWidth = false
      } else {
        this.isWidth = true
      }
    }
  },
};
</script>

<style lang="less" scoped>
.main-title {
  text-align: left;
  color: rgb(107, 106, 106);
  font-size: 25px;
}

.common-layout-1 {
  background-color: rgb(255, 255, 255);
  margin: 20px;
}

.common-layout-2 {
  background-color: rgb(255, 255, 255);
}

.common-layout-2 .el-header {
  position: relative;
  color: var(--el-text-color-primary);
}

.common-layout-2 .el-col {
  margin: auto;
  position: relative;
  color: var(--el-text-color-primary);
}
</style>
